<template>
	<!-- 进港预约 -->
	<view class="container">
		<view class="headForm">
			<u-form :model="form" ref="uForm" label-width="120px">
				<u-form-item label="* 被访人:" prop="company">
					<u-input v-model="form.company" disabled="true"/>
				</u-form-item>
				
				<u-form-item label="* 被访人部门:" prop="department">
					<u-input  type="select" :select-open="partListShow" v-model="form.department" 
					placeholder="请输入被访人部门" @click="partListShow = true"/>
				</u-form-item>
				
				<u-form-item label="* 被访人姓名:" prop="name">
					<u-input v-model="form.name" placeholder="请输入被访人姓名"/>
				</u-form-item>
				
				<u-form-item label="* 被访人手机:" prop="phone">
					<u-input v-model="form.phone" placeholder="请输入被访人手机"/>
				</u-form-item>
				
				<u-form-item label="* 到访时间:" prop="time">
					<u-button  :custom-style="customTimeStyle" @click="showBegin = true">{{ form.time }}</u-button>
				</u-form-item>
				
				<u-form-item label="* 预约事由:" prop="something">
					<u-input v-model="form.something" placeholder="请输入预约事由"/>
					<!-- <u-input type="select" :select-open="somethingShow" v-model="form.something" 
					placeholder="请输入预约事由" @click="somethingShow = true"/> -->
				</u-form-item>
				
				<u-form-item label="预约备注:" prop="memo" >
					<u-input v-model="form.memo" type="textarea" :height="height" :auto-height="autoHeight" placeholder="请输入预约备注"/>
				</u-form-item>
				
				<u-form-item label="图片上传:" prop="img">
					<u-upload ref="uUpload" max-count="1" :action="action" @on-success="handleSuccess" :auto-upload="true" ></u-upload>
				</u-form-item>
				
				<!-- <u-form-item label="访问人信息:" prop="accessName">
					<u-input v-model="form.accessName" placeholder="请输入访问人姓名"/>
					<u-input v-model="form.accessPhone" placeholder="请输入访问人手机号"/>
					<u-input v-model="form.accessPhone" placeholder="请输入访问人身份证"/>
					<u-input v-model="form.accessPhone" placeholder="请输入访问人工作单位"/>
					<u-input v-model="form.carcode" placeholder="请输入访问人来访车号"/>
				</u-form-item> -->
				
				<u-form-item label="* 访问人姓名" prop="accessName">
					<u-input v-model="form.accessName" placeholder="请输入访问人姓名"/>
				</u-form-item>
				
				<u-form-item label="* 访问人手机号" prop="accessPhone">
					<u-input v-model="form.accessPhone" placeholder="请输入访问人手机号"/>
				</u-form-item>
				
				<u-form-item label="* 访问人单位" prop="fr_company">
					<u-input v-model="form.fr_company" placeholder="请输入访问人单位"/>
				</u-form-item>
				
				<u-form-item label="访问人车号" prop="carcode">
					<u-input v-model="form.carcode" placeholder="请输入访问人来访车号"/>
				</u-form-item>
				
				<u-form-item label="访问人身份证" prop="ssz_no">
					<u-input v-model="form.ssz_no" placeholder="请输入访问人身份证号"/>
				</u-form-item>
				
				<u-form-item>
					<u-checkbox-group>
						<u-checkbox v-model="checkboxObj.checked" :disabled="checkboxObj.disabled">
							<view @click="agree" class="underline">勾选代表同意本公司版本协议</view>
							<!-- <view class="underline">《用户服务协议》</view>
							<view class="underline">《隐私协议》</view> -->
						</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
				<u-button shape="square" type="success" :custom-style="customStyle" @click="submit">确认预约</u-button>
			</u-form>
		</view>
		
		<u-picker v-model="showBegin" mode="time" :default-time="defaultTime" :params="params" @confirm="confirm"></u-picker>
		
		<u-select mode="single-column" :list="somethingList" v-model="somethingShow" @confirm="somethingConfirm"
			value-name="value" label-name="value">
		</u-select>
		
		<u-select mode="single-column" :list="partList" v-model="partListShow" @confirm="partListConfirm"
			value-name="value" label-name="value">
		</u-select>
		
		<u-popup v-model="show" width="100%" height="100%">
			<!-- 长源国际显示 -->
			<view v-if="textShow == true">
				<view style="text-align: center; font-size: 18px;">
					入港安全告知书
				</view>
				<view>
					尊敬的来访人员:
				</view>
				<view>为构建港区良好的作业环境，保障港口运输生产的顺利进行，现将本港区的相关规章制度和管理规定告知如下:</view>
				<view>(一）严格遵守国家相关法律、法规，遵守本港区安全生产规章制度，服从港方人员指挥、管理。</view>
				<view>(二)车辆、人员出入港区规定</view>
				<view>1、外来车辆、人员进出港区门卫需主动出示证件，并积极配合门卫检查、登记，进入港区必须配备安全帽。人员和车辆禁止擅自进入码头现场区域。</view>
				<view>(三)港区道路行驶及外来车辆管理规定</view>
				<view>1、入港车辆必须按照规定的路线行驶，严格遵守港区道路交通标志、标线、限速、限行规定，按照操作规范安全驾驶、文明驾驶。</view>
				<view>2、港区各路段小型车辆限速30公里/小时，大型车辆限速30公里/小时，所有交叉路口限速 5公里/小时。</view>
				<view>3、进入封闭区域的车辆禁止驶入码头、堆场作业区域，必须在码头引桥边的划线停车位内泊车。特殊情况需进入码头的车辆必须经现场人员同意，车辆不得停放在妨碍交通和装卸作业的区域。</view>
				<view>4、进入办公区域的车辆，必须停放在划线停车位内，严禁乱停占道。</view>
				<view>(四)港区内行人安全管理规定</view>
				<view>1、人员进入装卸作业现场，必须戴好安全帽，禁止吸烟，严禁做与作业无关的事情，不得妨碍港口安全生产，不损害港口生产、消防等设施设备。</view>
				<view>2、行人应在人行道内行走，没有人行道的靠路边、码头陆侧相对安全区域内行走(仅限制在码头及引桥，其它封闭区域禁止行走)。</view>
				<view>3、船舶靠离泊时，非系解缆人员不得靠近系、解缆区域。</view>
				<view>4、严禁在机械、车辆等狭窄通道间穿行、避风、避雨或休息;不得在码头边沿、系缆桩等行走、站立、停留;不准在接电箱和机械转动、行走部位或贴近上述部位坐立或放置物体。</view>
				<view>5、严禁乱扔垃圾，保持港区环境整洁。</view>
				<view>(五)处罚规定</view>
				<view>1、对违反港区规定、不服从现场管理、经指正仍不纠正的车辆及人员，港区将予以警告、劝离或限制入港处理。</view>
				<view>2.违章停车且驾驶员不在现场或者在现场但拒绝驶离，妨碍生产和其他个辆通行的，停止驾驶人及所驾车辆进港。</view>
				<view>3.在码头打架、阻塞交通、不服从现场管理人员管理和劝阻、并有辱骂和殴打管理人员等恶性行为的，停止驾驶人及所驾车辆进港 。</view>
				<view>4、如有违反以上各条款，我司将按照相关考核细则进行处理。</view>
				<view>本人已阅读本告知书，相关内容已知晓！</view>    
			</view>
			
			<!-- 苏中国际显示 -->
			<view v-if="textShow == false">
				<view style="text-align: center; font-size: 18px;">
					外来人员入港安全告知书
				</view>
				<view>
					尊敬的来访人员:
				</view>
				<view>热忱欢迎您来我港指导、参观、访问、交流、洽谈业务！</view>
				<view>
					我港主要危险有害因素有：火灾、触电、淹溺、起重伤害、车辆伤害及机
					械伤害等。按照“安全第一，预防为主，综合治理”的原则，为了保证您的人身安全，预防事故发生，请您配合我港熟悉并遵守以下规定：
				</view>
				<view>
					一、我单位划分为办公区域和生产作业区域，进入生产作业区域（即闸口）有明显警示标志标牌，提请您注意。
				</view>
				<view>
					二、如果您需要进入办公区域，请您接受岗亭保安的询问，配合岗亭保安的管理，提供被访问的公司、部门、被访问人员的姓名和电话，经保安电话确认无误，保安放行。
				</view>
				<view>
					三、如果您需要进入生产作业区域，同样需要您提供被访问的公司、部门、被访人员的姓名和电话，经我港安全环保科同意，由对接部门进行安全告知，并签订外来人员《安全告知书》，方可在我港相关人员的全程陪同下进入生产作业区域，直至您完成工作离开我港。
				</view>
				<view>
					四、如果您前来港区开展零星业务，凡涉及直接作业环节内容（如装卸、驾驶、登高、检维修等）的，事前还应到我港安全环保科进行安全教育。事前未按要求进行安全教育者，我港有权进行处罚。在进入港区时，必须取得我港安全监督部门工作人员同意，进行安全告知并签订外来人员《安全告知书》后方可进入。
				</view>
				<view>五、为了您的人身安全及工作顺畅，进入我港，提请您注意以下事项：</view>
				<view>
					1、进入我港生产作业区时，请主动联系我港相关人员，接受岗亭保安检查；不要穿露趾的凉、拖鞋，不要擅自驾驶机动车辆进入我港生产作业区；您的车辆进入我港生产作业区域内严格按我港交通指示行驶时，应遵守相关限行、限速要求及在规定的停车区域内停车，车辆不得停靠在场、岸桥黄色警戒线内，以免发生碰撞；未经我港相关人员同意并在现场指挥，严禁车辆在我港生产作业区内横穿堆场以及无人值守方式整夜停留；
				</view>
				<view>2、在我港生产作业区内任何地方都严禁吸烟；</view>
				<view>3、不要携带易燃、易爆、有毒等危险物品入港内；</view>
				<view>4、在我港内未经我港安全环保科人员同意，不能擅自动用港区内消防器材及应急救援器材；</view>
				<view>5、未经我港相关人员同意，严禁登上或操作各种机械设备及擅自动用各种开关、各种阀门，触碰各类电气、仪表按钮，以免发生异常，威胁到您的安全；</view>
				<view>6、进入我港生产作业区域，请您戴上安全帽并系紧下颌带；如我港安全管理人员提出其他劳动防护用具的穿戴、使用要求，请务必予以配合；</view>
				<view>7、饮酒后请勿进入我港生产作业区；</view>
				<view>8、在我港作业船舶的船员，上、下船舶时，请走搭有安全网的通道；</view>
				<view>9、在我港生产作业区域内，请不要随意在堆场或作业现场穿行、逗留；</view>
				<view>10、未经我港相关人员许可，禁止在生产区内、安全敏感区域照相、摄像；</view>
				<view>11、如果您在我港停留期间出现异常或紧急情况时，请及时按照陪同人员或岗位工作人员的指令要求迅速疏散到安全地方远离危险地，并拨打我港应急电话：0513-87588852</view>
				<view>12、未尽事宜，请按照现场安排执行。热情欢迎您对我们的工作提出宝贵意见。</view>
				<view>六、处罚规定</view>
				<view>1、对违反港区规定、不服从现场管理、经指正仍不纠正的车辆及人员，港区将予以警告、劝离或限制入港处理。</view>
				<view>2.违章停车且驾驶员不在现场或者在现场但拒绝驶离，妨碍生产和其他个辆通行的，停止驾驶人及所驾车辆进港。</view>
				<view>3.在码头打架、阻塞交通、不服从现场管理人员管理和劝阻、并有辱骂和殴打管理人员等恶性行为的，停止驾驶人及所驾车辆进港。</view>
				<view>4、如有违反以上各条款，我司将按照相关考核细则进行处理。</view>
				<view>本人已阅读本告知书，相关内容已知晓！</view>
			</view>
			<u-button shape="square" type="success" :custom-style="customStyle" @click="popupClick" :disabled="finish">已知晓{{ time }}</u-button>
		</u-popup>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				customStyle: {
					marginTop: '20px',
				},
				customTimeStyle: {
					height: '60rpx',
				},
				finish: true,
				time: 7,				// 倒计时秒
				height: 100,
				autoHeight: true,
				showBegin: false,		// 时间
				somethingShow: false,	// 预约事由
				partListShow: false,
				show: false,			//	弹出层
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				textShow: false,		// 弹出层文字控制显示
				// table 表单
				form: {
					company: '',
					department: '',
					name: '',
					phone: '',
					time: '请选择时间',
					something: '',
					memo: '',
					img: '',
					accessName: '',
					accessPhone: '',
					carcode: '',
					ssz_no: '',
					fr_company: '',
					idNo: ''
				},
				defaultTime: '',		// 默认时间
				somethingList: [
					{ value: '工作交流' },
					{ value: '拜访' },
					{ value: '施工' },
					{ value: '送货'},
					{ value: '上级检查' },
					{ value: '参观'},
					{ value: '其他' }
				],
				partList: [
					{ value: '商务部' },
					{ value: '生产部' },
					{ value: '综合管理部' },
					{ value: '财务管理部' },
					{ value: '设备部' },
					{ value: '安环部' }
				],
				// 非真实地址-上传的地址
				action: 'https://api.zlkj-port.com/cygjapi/App/fileUpload',
				id: 0,		// 图片id
				rules: {
					company: [ { required: true, message: '被访人单位不能为空' } ],
					department: [ { required: true, message: '被访人部门不能为空' } ],
					name: [ { required: true, message: '被访人姓名不能为空' } ],
					phone: [ { required: true, message: '被访人手机不能为空' } ],
					time: [ { required: true, message: '到访时间不能为空' } ],
					something: [ { required: true, message: '预约事由不能为空' } ],
					accessName: [ { required: true, message: '访问人姓名不能为空' } ],
					accessPhone: [ { required: true, message: '访问人手机号不能为空' } ],
					// ssz_no: [ { required: true, message: '访问人身份证不能为空' } ],
					fr_company: [ { required: true, message: '访问人单位不能为空' } ],
				},
				checkboxObj: {
					name: '',
					checked: false,
					disabled: true
				},
				file1path: '',
				intTime: null,
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onReady() {
			this.defaultTime = this.current_date()
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(options) {
			this.form.company = options.portname
			console.log(options)
			// console.log(this.userInfo)
			// this.form.accessName = this.userInfo.nickName
			this.form.accessPhone = this.userInfo.tel
		},
		methods: {
			agree() {
				if(this.form.company == '长源国际') {
					this.textShow = true
				} else if (this.form.company == '苏中国际') {
					this.textShow = false
				}
				
				this.show = true
				if(this.time === 7) {
					this.intTime = setInterval(() => {
						this.time --
						if( this.time === 0 ) {
							clearInterval(this.intTime)
							this.finish = false
							this.time = ''
						}
					}, 1000)
				}
			},
			handleSuccess(response) {
				if(response.id !== null && response.id !== undefined) {
					this.file1path = response.filepath
					this.id = response.id
					console.log(this.file1path)
					console.log(response)
				}
			},
			popupClick() {
				this.checkboxObj.checked = true
				this.show = false
				// this.time = 7
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if(valid) {
						if(this.checkboxObj.checked) {
							
							if (!this.form.accessName || !this.form.accessPhone) {
							    this.$refs.uTips.show({
							    	title: '访问人姓名和手机号不能为空！',
							    	type: 'warning',
							    	duration: '2500'
							    })
							    return
							}
							
							if(this.form.time === '请选择时间') {
								this.$refs.uTips.show({
									title: '请选择时间！',
									type: 'warning',
									duration: '2500'
								})
								return
							}
							
							// 勾选了协议进行提交操作
							uni.request({
								url: 'https://api.zlkj-port.com/cygjapi/zlzg/A/0zGCGE505AbYfNT'+
									'?bfr_company=' + this.form.company + 
									'&bfr_department=' + this.form.department + 
									'&bfr_name=' + this.form.name +
									'&bfr_tel=' + this.form.phone + '&access_tim=' + this.form.time +
									'&access_resaon=' + this.form.something +
									'&access_memo=' + this.form.memo +
									'&fr_name=' + this.form.accessName +
									'&fr_tel=' + this.form.accessPhone + 
									'&fileid=' + this.id +
									'&carcode=' + this.form.carcode + 
									'&ssz_no=' + this.form.ssz_no + 
									'&fr_company=' + this.form.fr_company,
								method: "get",
								success: (res) => {
									this.$refs.uTips.show({
										title: '预约成功！',
										type: 'success',
										duration: '2500'
									})
									this.form = {
										company: this.form.company,
										department: '',
										name: '',
										phone: '',
										time: '请选择时间',
										something: '',
										memo: '',
										img: '',
										accessName: '',
										accessPhone: this.userInfo.tel,
										carcode: '',
										ssz_no: '',
										fr_company: '',
										idNo: ''
									}
									// 清空图片
									this.$refs.uUpload.clear()
								}
							})
							
							this.$refs.uUpload.upload()
						} else {
							this.$refs.uTips.show({
								title: '请先勾选协议',
								type: 'warning',
								duration: '2300'
							})
						}
					}
				})
			},
			// 时间确认按钮
			confirm(val) {
				this.form.time = val.year + '-' + val.month + '-' + val.day + ' ' + val.hour + ':' + val.minute
				console.log(this.form.time)
			},
			// 预约事由确认按钮
			somethingConfirm(val) {
				this.form.something = val[0].value
				console.log(this.form.something)
			},
			partListConfirm(val) {
				this.form.department = val[0].value
				console.log(this.form.department)
			},
			current_date() {
				var nowDate = new Date();
				let date = {
					year: nowDate.getFullYear(),
					month: (nowDate.getMonth() + 1).toString().padStart(2,0),
					day: nowDate.getDate().toString().padStart(2,0),
					hour: nowDate.getHours().toString().padStart(2, 0),
					minute: nowDate.getMinutes().toString().padStart(2, 0)
				}
				let systemDate = date.year + "-" + date.month + "-" + date.day + " " + date.hour + ":" + date.minute
				return systemDate
			}
		}
	}
</script>

<style lang="scss" scoped>
::v-deep .u-form-item__body {
	background-color: rgba(255, 255, 255, 1);
	margin: 0px 10rpx;
	border-radius: 20rpx;
}
::v-deep .u-form-item {
	padding: 15rpx !important;
}
::v-deep view, text {
	padding-left: 5rpx;
}
.container {
	// height: 100%;
	background-color: rgba(245, 245, 245, 1);
}
.headForm {
	padding: 10rpx;
}
.custom-form-item {
  height: 60px !important;
}
.underline {
	text-decoration: underline;
	color: blue;

}
</style>
